<template>
    <div>
      <div id="nav">
        <div class="sidebar-collapse navActive" role="navigation" >
          <ul class="nav" id="main-menu">
            <li class="mian-list">
              <router-link to="/index/pay" tag="a">
                <i class="iconfont icon-zhifu"></i>支付中心
              </router-link>
            </li>
            <li class="mian-list">
              <router-link to="/index/payroll" tag="a">
                <i class="iconfont icon-daifu"></i>代付中心
              </router-link>
            </li>
            <li class="mian-list">
              <router-link to="/index/user" tag="a">
                <i class="iconfont icon-yonghu"></i>用户中心
              </router-link>
            </li>
          </ul>
        </div>
      </div>
      <div id="page-wrapper">
        <router-view></router-view>
      </div>

    </div>
</template>

<script>

    export default {
      name: "index",
      data(){
        return{

        }
      }
    }
</script>

<style scoped>
  .sidebar-collapse {
    position: fixed;
    width:150px;
    height: 100%;
    z-index: 200;
    background: #081120!important;
    top: 0;
    left: 0;
  }
  #page-wrapper {
    position: relative;
    margin: 0 0 0 160px;
    top: 10px;
    box-shadow: 0 0 10px #e8e8e8;
    background: #e8e8e8;
    min-height: 750px;

  }
  .mian-list {
    width: 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  .mian-list a{
    text-decoration: none;
    font-size: 13px;
    color: #fff;
    display: block;
  }
  .mian-list a i{
    vertical-align: middle;
    margin-right: 5px;
  }
  .sidebar-collapse .nav > li>a.active{
    background: #11294f;
    color: #639eff;
  }
</style>
